<div class="box">

  <div id="popUpItem" onclick="closeItem()" style="top: 20%; z-index: 11; position:fixed;" ></div>
  <div id="darkBack" onclick="closeBack()" style="top: 0px; left: 0px; width: 100%; background-color: rgb(0, 0, 0); position: fixed; z-index: 10;" ></div>

  <div class="title">
    <h5>Target Calls</h5>
  </div>
  <!-- end box / title -->

<script type="text/javascript">
$(document).ready(function() {
  $( ".data_table_mang" ).tabs();

$('#loadmore').click(function(){
 var row = $('tbody.rOutlets').children().length;
 search(row);
 // $('#trLoad').show();
});
$('#search').click(function(e)
{
  $(".rOutlets").empty();
  
  var row=0;
  $(this).attr("disabled",true);
  $('#ajaxLoad').fadeIn('slow');
    // e.preventDevault();
  search(row);
  // $('#trLoad').show();
  $('#ajaxLoad').fadeOut('slow');
$(this).attr("disabled",false);
    return false; 
  });


      $( "#datepicker" ).datepicker({
        showOn: "button", maxDate: "0",
        showWeek: true, dateFormat: 'yy-mm-d',
        buttonImage: "<?php echo base_url('file/images/table.png'); ?>",
        buttonImageOnly: true
      });
  });

function search(row){


  var no = row +1;
  var sales_id = $('#sales-name').val().split(';');
    // alert(sales_id[0]);
  //   $.post("index.php/merchandiser/search", {
  //     merchan_id: sales_id[0],
  //     date: $('#datepicker').val(),
  //     row: row
  //   },

  //   function(data){
      
  //     if (data.length > 0){
  //       // alert(this.key);
  //       $.each(data, function(){
          
  //         $('<tr><td>'+no++ +'</td><td>'
  //           +this.partner_id+'</td><td><a class="address" title="' + this.address +'" </a>'
  //           +this.outlet_name +'</td><td>'
  //           + this.key +'</td><td><a id="'+ this.img+'" onclick="popUp(this.id)" target="_blank">\
  //           <img style="width:50px" src='
  //           + this.img +' /></a></td><td>' + this.checkin +'</td><td>' +this.checkout + '</td></tr>').appendTo(".rOutlets");

  //       });
  //       $('#trLoad').show();
  //       if (data.length <10){
  //       $('#trLoad').hide();
  //     }
  //     }
  //     else {
  //       $('<tr><td colspan="7"> Data Outlet tanggal '+$('#datepicker').val()+' Tidak Ada</td></tr>').appendTo(".rOutlets");
  //     }
  //   // }
  // }, "json");

    $.ajax({
      url : "index.php/merchandiser/search",
      data : {merchan_id: sales_id[0],
              date: $('#datepicker').val(),
              row: row},
      type :'POST',
      dataType : 'json',
      success :   function(data){
      
      if (data.length >= 1){
        // alert(this.key);
        $.each(data, function(){
          
          $('<tr><td>'+no++ +'</td><td>'
            +this.partner_id+'</td><td><a class="address" title="' + this.address +'" </a>'
            +this.outlet_name +'</td><td>'
            + this.key +'</td><td><a id="'+ this.img+'" onclick="popUp(this.id)" target="_blank">\
            <img style="width:50px" src='
            + this.img +' /></a></td><td>' + this.checkin +'</td><td>' +this.checkout + '</td></tr>').appendTo(".rOutlets");

        });
        $('#trLoad').show();
        if (data.length < 10){
        $('#trLoad').hide();
      }
      }
      else {
        $('<tr><td colspan="7"> Data Outlet tanggal '+$('#datepicker').val()+' Tidak Ada</td></tr>').appendTo(".rOutlets");
        $('#trLoad_'+id).hide();
      }
    }


    });

}
function popUp(urlImg)
{
  var wrapperHeight = $('#content').height();
  $('#darkBack').css({'height': ($(document).height())+'px'});
  var urlBase = '<?php echo base_url()?>';
  $("#darkBack").css({"opacity" : "0.7"})
  .fadeIn("slow");

  $("#popUpItem").css({"opacity" : "1"})
  .fadeIn("slow");    

    //$("#popUpItem").html("<img src='"+urlBase+"file/uploads/"+urlImg+"' width='400px'/>")
    $("#popUpItem").html("<img src='"+urlBase+urlImg+"' width='400px'/>")
    .center()
    .fadeIn("slow");
    //alert(wrapperHeight);
  }
  function closeBack()
  {
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
  }

  function closeItem()
  {
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
  }


  $(document).keypress(function(e){
    if(e.keyCode==27){
      $("#darkBack").fadeOut("slow"); 
      $("#popUpItem").fadeOut("slow");   
    }
  });

  jQuery.fn.center = function () {
        // this.css("position","absolute");
        // this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
      }
      </script>


  <?php
  $msg = $this->session->flashdata('message');
  if($msg <> ""){
    echo'<div id="box-messages">
    <div class="messages">
    <div id="message-success" class="message message-success">
    <div class="image">
    <img src="'. base_url() .'file/shell/smooth/resources/images/icons/success.png" alt="Success" height="32" />
    </div>
    <div class="text">
    <h6>'. $msg .'</h6>
    </div>
    <div class="dismiss">
    <a href="#message-success"></a>
    </div>
    </div>
    </div>
    </div>';
  }
  ?>       
  <table id="records">
    <tbody>
      <tr>
        <td >Merchandiser</td>

        <td align="left" ><select name="sales_name" id="sales-name">
          <!--<option value=""></option> -->
          <?php 
          foreach ($sales as $key) {
            echo '<option value="'.$key->user_id.';'.$key->user_group_id.'">'.$key->user_id.' | '.$key->user_name.' | '.$key->user_group_caption.'</option>';
          }
          ?>
        </select>
      </td>

    </tr>
    <tr>
      <td> Tanggal Kunjungan</td>
      <td>
        <input  type="text" readonly="readonly" class="datepicker" id="datepicker" value="<?php echo date('Y-m-j'); ?>" />

        <button id="search" >cari</button> <img style="display : none" id="ajaxLoad" src="<?php echo base_url()?>file/smooth/images/ajax-loader2.gif" /></td>
 
      </tr>
    </tbody>
  </table>
  <div class="data_table_mang">

    <ul>
      <li><a href="#tabs-1">Outlet</a></li>
    </ul>
    <div id="tabs-1">

      <div class="table">
        <base href="<?php echo base_url() ?>" />

        <table id="records" class="showOutlet">
          <thead>

            <tr>
              <th> NO</th>
              <th> Outlet id</th>
              <th> Nama Outlet</th>
              <th> Keywords</th>
              <th> Gambar</th>
              <th> Check IN</th>
              <th> Check OUT</th>
            </tr>
          </thead>
          <tbody class="rOutlets" > </tbody>

          <tfoot id="trLoad" style="display:none">
            <tr >
              <td colspan="7">
                <a id="loadmore" style="display:block; text-align:center; ">Load More Outlets</a>
              </td>
            </tr>
          </tfoot> 
        </table>

      </div>
    </div>

    <?php
                //echo $userGroupId['user_group_id'];
                //if($userGroupId['user_group_id'] == 4 || $userGroupId['user_group_id'] == 5){
                        // $this->load->view('grid-merchandising-outlet');
                //}else{
                       // $this->load->view('grid-merchandising-view2');//echo'<iframe src="'.base_url().'index.php/territory/territory_iframe/chart" width=100% height=600px>';
                //}
    ?>      
  </div>

</div>

